<template>
  <div class="notification-demo">
    <h1>Notification 示例</h1>

    <button @click="showTopRight">显示右上通知</button>
    <button @click="showBottomLeft">显示左下通知</button>
    <button @click="showCustomMessage">显示复杂内容通知</button>
  </div>
</template>

<script setup>
import {createApp, h} from 'vue'
import Notification from '@/components/Notification/Notification.vue'

const showTopRight = () => {
  createNotification({
    title: '成功',
    message: '操作已成功完成',
    position: 'topRight',
    duration: 3000
  })
}

const showBottomLeft = () => {
  createNotification({
    title: '警告',
    message: '系统即将维护',
    position: 'bottomLeft',
    duration: 0  // 不自动关闭
  })
}

const showCustomMessage = () => {
  createNotification({
    title: '自定义内容',
    message: () => h('div', [
      h('p', '这是一个带样式的消息'),
      h('p', { style: 'color: red' }, '红色文字')
    ]),
    clickEndFn: () => console.log('通知被点击')
  })
}

// 创建通知的通用方法
const createNotification = (options) => {
  // 实际应用中应该使用更复杂的挂载逻辑
  const container = document.createElement('div')
  document.body.appendChild(container)

  const { closeEndFn } = options

  const extendedOptions = {
    ...options,
    closeEndFn: () => {
      closeEndFn?.()
      container.remove()
    }
  }

  createApp(Notification, extendedOptions).mount(container)
}
</script>